<script setup lang="ts">
document.querySelectorAll('.status-tag').forEach(tag => {
  tag.addEventListener('click', () => {
    document.querySelectorAll('.status-tag').forEach(t => t.classList.remove('active'));
    tag.classList.add('active');
  });
});

// 时间筛选点击效果
document.querySelectorAll('.time-option').forEach(option => {
  option.addEventListener('click', () => {
    document.querySelectorAll('.time-option').forEach(o => o.classList.remove('active'));
    option.classList.add('active');
  });
});
</script>

<template>
  <div class="mt-20">

    <!-- 主内容区 -->
    <div class="wty-container">
      <!-- 左侧筛选区 -->
      <div class="container">

        <div class="filter-panel">
          <div class="filter-title">筛选条件</div>

          <div class="filter-group">
            <label class="filter-label">需求分类</label>
            <select class="filter-select">
              <option value="">全部分类</option>
              <option value="tool">工具类</option>
              <option value="design">设计类</option>
              <option value="plugin">功能插件</option>
              <option value="idea">创意点子</option>
            </select>
          </div>

          <div class="filter-group">
            <label class="filter-label">需求状态</label>
            <div class="status-tags">
              <div class="status-tag active">全部</div>
              <div class="status-tag">待开发</div>
              <div class="status-tag">开发中</div>
              <div class="status-tag">已完成</div>
            </div>
          </div>

          <div class="filter-group">
            <label class="filter-label">时间筛选</label>
            <div class="time-options">
              <div class="time-option active">最新发布</div>
              <div class="time-option">本周热门</div>
              <div class="time-option">本月精选</div>
            </div>
          </div>
        </div>

        <!-- 右侧需求列表 -->
        <div class="demand-list" style="min-height: 700px">
          <!-- 需求卡片1 -->
          <div class="demand-card">
            <h3 class="card-title">求一个Excel批量导入数据的小工具</h3>
            <p class="card-desc">
              需要一个能将Excel表格数据批量导入到数据库的工具，支持格式校验和错误提示，最好有简单的可视化界面。</p>
            <div class="card-meta">
              <div class="user-info">
                <img src="https://picsum.photos/id/1/24/24" class="user-avatar" alt="用户头像">
                <span>张小明</span>
                <span>2小时前</span>
              </div>
              <div>
                <span class="tag tag-category">工具类</span>
                <span class="tag tag-status pending">待开发</span>
              </div>
            </div>
            <div class="card-actions" style="margin-top: 10px;">
              <button class="action-btn">查看详情</button>
              <button class="action-btn primary">我要开发</button>
            </div>
          </div>

          <!-- 需求卡片2 -->
          <div class="demand-card">
            <h3 class="card-title">创意：基于天气的穿搭推荐小程序</h3>
            <p class="card-desc">
              根据用户所在地的实时天气、温度、湿度，推荐合适的穿搭方案，支持保存个人风格偏好，简单实用为主。</p>
            <div class="card-meta">
              <div class="user-info">
                <img src="https://picsum.photos/id/2/24/24" class="user-avatar" alt="用户头像">
                <span>李华</span>
                <span>1天前</span>
              </div>
              <div>
                <span class="tag tag-category">创意点子</span>
                <span class="tag tag-status pending">待开发</span>
              </div>
            </div>
            <div class="card-actions" style="margin-top: 10px;">
              <button class="action-btn">查看详情</button>
              <button class="action-btn primary">我要开发</button>
            </div>
          </div>

          <!-- 需求卡片3 -->
          <div class="demand-card">
            <h3 class="card-title">需要一个简单的个人记账网页应用</h3>
            <p class="card-desc">记录日常收支，支持按类别统计（餐饮、交通、娱乐等），能生成月度报表，数据保存在本地即可。</p>
            <div class="card-meta">
              <div class="user-info">
                <img src="https://picsum.photos/id/3/24/24" class="user-avatar" alt="用户头像">
                <span>王小红</span>
                <span>3天前</span>
              </div>
              <div>
                <span class="tag tag-category">工具类</span>
                <span class="tag tag-status">开发中</span>
              </div>
            </div>
            <div class="card-actions" style="margin-top: 10px;">
              <button class="action-btn">查看详情</button>
              <button class="action-btn primary" disabled>开发中</button>
            </div>
          </div>

          <!-- 需求卡片4 -->
          <div class="demand-card">
            <h3 class="card-title">求设计一套简约风格的博客网站UI</h3>
            <p class="card-desc">需要首页、文章页、分类页的UI设计图，风格简约清新，以阅读体验为主，色彩搭配不超过3种。</p>
            <div class="card-meta">
              <div class="user-info">
                <img src="https://picsum.photos/id/4/24/24" class="user-avatar" alt="用户头像">
                <span>赵小刚</span>
                <span>1周前</span>
              </div>
              <div>
                <span class="tag tag-category">设计类</span>
                <span class="tag tag-status">已完成</span>
              </div>
            </div>
            <div class="card-actions" style="margin-top: 10px;">
              <button class="action-btn">查看详情</button>
              <button class="action-btn primary" disabled>已完成</button>
            </div>
          </div>
        </div>

      </div>

    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <span class="pagination-info">共 <span id="totalCount">0</span> 条需求</span>
      <select class="page-size-select" id="pageSizeSelect">
        <option value="4">4条/页</option>
        <option value="8">8条/页</option>
        <option value="12">12条/页</option>
      </select>
      <button class="page-btn" id="prevPage" disabled>上一页</button>
      <div id="pageNumbers"></div>
      <button class="page-btn" id="nextPage" disabled>下一页</button>
    </div>

  </div>
</template>

<style scoped>




/* 主内容区样式 */
.container {
  display: flex;
  max-width: 1200px;
  gap: 20px;
}

/* 左侧筛选区 */
.filter-panel {
  width: 240px;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.filter-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.filter-select {
  width: 100%;
  height: 34px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
}

.status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-tag {
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e6eb;
}

.status-tag.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.time-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-option {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 4px 0;
}

.time-option.active {
  color: #409eff;
  font-weight: 500;
}

/* 右侧需求列表 */
.demand-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.demand-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.demand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
  line-height: 1.4;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #f5f5f5;
  padding-top: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;
}

.tag-category {
  background-color: #f0f7ff;
  color: #409eff;
}

.tag-status {
  background-color: #f6ffed;
  color: #52c41a;
}

.tag-status.pending {
  background-color: #fff7e8;
  color: #faad14;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e6eb;
  background: transparent;
}

.action-btn.primary {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

/* 发布弹窗（默认隐藏） */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay.show {
  display: flex;
}

.modal {
  width: 500px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.form-group {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  font-size: 14px;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.modal-btn.cancel {
  border: 1px solid #e5e6eb;
  background: transparent;
  color: #666;
}

.modal-btn.confirm {
  background-color: #409eff;
  color: white;
  border: none;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .filter-panel {
    width: 100%;
  }

  .demand-list {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }
}


/* 分页容器 */
.pagination {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* 分页按钮 */
.page-btn {
  padding: 6px 12px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  color: #666;
}

.page-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.page-btn.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.page-btn:disabled {
  cursor: not-allowed;
  color: #ccc;
  border-color: #eee;
}

/* 每页条数选择器 */
.page-size-select {
  padding: 6px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  margin-right: 10px;
}

/* 分页信息 */
.pagination-info {
  color: #666;
  margin-right: 10px;
}


</style>